<template>
	<view class="login">
		<my-header :title="title" :back="true"></my-header>
		<uni-card title="登录" style="margin-top: 60px;">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="用户名" required name="username">
					<uni-easyinput v-model="valiFormData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput type="password" v-model="valiFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" required name="captcha">
					<uni-row>
						<uni-col :span='14'>
							<uni-easyinput v-model="valiFormData.captcha" placeholder="请输入验证码" />
						</uni-col>
						<uni-col :span='10'>
							<image :src="codeUrl" style="width: 100%; height: 35px;" @click="getCode"></image>
						</uni-col>
					</uni-row>					
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">登录</button>
			<!-- <view style="height: 50px;">
				{{codeUrl}}
			</view> -->
		</uni-card>
	</view>
</template>

<script>
	/**
	 * 获取uuid
	 */
	export function getUUID() {
	  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
	    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
	  })
	}
	import md5 from 'js-md5'
	import MyHeader from '@/components/header.vue'
	export default {
		components: {
			MyHeader,
		},
		data() {
			return {
				codeUrl: '111',
				title: '双凤镇企业服务中心',
				// 校验规则
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					username: {
						rules: [{
							required: true,
							errorMessage: '用户名不能为空'
						}]
					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: '验证码不能为空'
						}]
					}
				},
				// 校验表单数据
				valiFormData: {
					username: '',
					password: '',
					captcha: '',
					uuid: '',
				},
			}
		},
		created() {
			this.getCode()
		},
		methods: {
			getCode() {
				const uuid = getUUID();
				console.log(uuid, 'uuid')
				uni.request({
					url: '/sf_enterprise_service/captcha.jpg',
					method: 'GET',
					data: {
						'uuid': uuid
					},
					success: (res) => {		
						// console.log(res, 'res??')
						if(res) {					
							this.codeUrl = res.data.data.base64Str;
							this.valiFormData.uuid = uuid;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete: () => {							
						uni.hideLoading();
					}
				})
			  //   getCodeImg(uuid).then(res => {
					// const { data } = res;
					// this.codeUrl = data.base64Str;
					// this.loginForm.uuid = uuid;
			  //   })
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.valiFormData.password = md5(this.valiFormData.password)
					console.log('success', res, this.valiFormData);
					// return
					uni.request({
						url: '/sf_enterprise_service/sys/login/mobile',
						data: this.valiFormData,
						method: 'POST',
						success: (res) => {		
							console.log(res, 'res??')
							// return
							if(res.data.code == 0) {						
								// 保存账号信息至localStorage
								uni.setStorage({
									key: 'shuangfengData',
									data: res.data.data,
									success: function () {
										console.log('success');
										// 返回上一页
										uni.navigateBack()
									}
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								})
							}
						},
						complete: () => {							
							uni.hideLoading();
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style scoped>
.login {
	/* height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center; */
}
</style>
